'use strict';
import React from 'react';
import {Button, Card, Descriptions, Form, InputNumber, notification} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import {FormField, FormLayout, ModalFooter} from "antd-extra";
import DescGroup from "../../../components/DescriptionGroup";
import styles from "../../index.less";
import ViewTitle from "../../../components/ViewTitle";
import notify from "../../../components/NotificationExtra";


moment.locale('zh-cn');
const table = 'ShippingFee';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            finance,
            store
          }) => ({...user, ...finance, ...dynamicLabel, ...global, ...store}))
export default class ModalShippingFeeDetail extends FormBase {
  constructor(props) {
    super(props);
    this.state = undefined;
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table}
    });
  }

  renderFoot = () => {
    const {foot, value, modalRef, form, record, callback} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                notify({type: 'error', message: '有必填项未填写！'});
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              const {payment} = values;
              record.paymentAmount = payment;
              callback(record);
              modalRef.close();
            });
            modalRef.close();
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  render() {
    const {style, record, cols = 2, form} = this.props;
    const model = this.props[`${table}Model`];
    const {paymentAmount = 0} = record;
    const {payment = paymentAmount} = form.getFieldsValue();
    const labels = [];
    _.map(model, (item, key) => {
      item.key = key;
      labels.push(item);
    });

    return (
      <Form className={styles.content}>
        <ViewTitle
          title={"运费详情"}
        >

        </ViewTitle>
        <DescGroup
          {...{
            labels,
            values: record,
            size: 'default',
            column: cols
          }}
        ></DescGroup>
        <FormLayout form={form} cols={1}>
          <FormField
            style={{marginTop: '16px', font: '24px'}}
            label={'实际支付运费'}
            name={'payment'}
            initialValue={payment}
            required={true}
          >
            <InputNumber></InputNumber>
          </FormField>
        </FormLayout>
        {this.renderFoot()}
      </Form>

    );
  }
}
